import { useRef } from 'react'

/* const a = { href: 'x' }
console.log(a.href) */

export default function App() {
  // !#1
  const aRef = useRef<HTMLAnchorElement>(null) // aRef.current => null
  const inputRef = useRef<HTMLInputElement>(null)
  const handleClick = () => {
    // aRef.current 可能是一个 null
    // console.log(aRef.current.href)
    // 加 ? 号确实表示前面不为 null 或 undefined 才往后面进行
    // 即便我保证 aRef.current 确实存在了才获取 href 也会报错，为什么呢？
    // 因为“存在”并不表示就有 href 属性
    // 解决方式就是指定 useRef 中的初始值类型
    console.log(aRef.current?.href)
    console.log(inputRef.current?.value)
  }
  return (
    <div>
      <input type='text' ref={inputRef} />
      {/* //!#2 和 a 的 ref 属性进行绑定 */}
      <a href='https://www.zhihu.com' ref={aRef}>
        知乎
      </a>
      <button onClick={handleClick}>获取链接</button>
    </div>
  )
}
